<template>
    <div  style="float:left;height:50px;display: flex;justify-content: space-evenly;align-items: center">
        <el-icon @click="changeMenuState()" class="hoverIcon" style="width: 30px;cursor:pointer">
            <Fold v-show="menuState.openState" />
            <Expand v-show="!menuState.openState"/>
        </el-icon>
        <el-breadcrumb separator="/" style="margin-left: 10px">
            <TransitionGroup name="list" tag="span">
            <el-breadcrumb-item v-for="item in levelPath" :key="item.name">{{item.name}}</el-breadcrumb-item>
            </TransitionGroup>
        </el-breadcrumb>
    </div>
    <div style="float: right;height:50px;width:100px; display: flex;justify-content: space-evenly;align-items: center">
        <el-dropdown>
            <div style="line-height: 50px;display: flex;justify-content: flex-end;align-items: center">
                <el-avatar  style="height:40px;width: 40px;margin: 5px;" :src="data.user.avatar||defaultAvatar" />
            </div>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item @click="toMain">个人主页</el-dropdown-item>
                    <el-dropdown-item divided @click="logout">退出登出</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
        <span style="float: right;color: black;margin-right: 5px">{{nickName}}</span>
    </div>
    <div style="float: right;height:50px;width:50px; display: flex;justify-content: space-evenly;align-items: center;cursor:pointer">
        <el-icon @click="fullScreen"  :class="fullScreenClass" :title="fullScreenTitle">
            <FullScreen/>
        </el-icon>
    </div>
    <div style="float: right;height:50px;width:50px; display: flex;justify-content: space-evenly;align-items: center;cursor:pointer">
        <el-icon size="22px">
            <el-badge :value="2" is-dot class="item">
            <Bell />
            </el-badge>
        </el-icon>
    </div>
    <div style="float: right;width:50px;display: flex;justify-content: space-evenly;align-items: center">
       <img style="height:50px;width:50px;cursor:pointer" @click="toGitee" src="@/assets/gitee.svg"/>
    </div>
</template>

<script  setup>
    import MenuTree from '@/components/MenuTree.vue'
    import {onBeforeMount,reactive,computed,ref, toRefs} from 'vue'
    import screenfull from 'screenfull'
    import request from '@/utils/request.js'
    import {useRouter} from 'vue-router'
    import { ElMessage, ElMessageBox} from 'element-plus'
    import { openState } from '@/stores/openState'
    import {navTab} from '@/stores/navTab'
    let fullScreenClass = ref("hoverIcon");
    let fullScreenTitle = ref("全屏");
    let navTabStores = navTab()
    let menuState = openState()
    const router = useRouter()
    const defaultAvatar = 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
    let data = {
        user:{}
    }
    let nickName = computed(function () {
        let nickNameReal = data.user.nickName
        return nickNameReal.substring(nickNameReal.length - 2, nickNameReal.length)
    })

    let levelPath = computed(function () {
        let levelPathTemp = reactive([])
        let tab = navTabStores.currentTab
        if(tab){
            if(tab.parent){
                levelPathTemp.push({name:tab.parent.name})
            }
            levelPathTemp.push({name:tab.name})
        }
        return levelPathTemp
    })
    onBeforeMount (function(){
        let userdb = JSON.parse(sessionStorage.getItem("user")||"{}")
        data.user = reactive(userdb);
    })

    function toMain() {
        let item = {name: '个人主页', path:'/currHomePage', clicked:true}
        navTabStores.routeTo(item)
    }
    function changeMenuState() {
        menuState.openState = !menuState.openState
    }
    function toGitee() {
        window.open("https://gitee.com/youbuger")
    }
    function fullScreen() {
        if (!screenfull.isEnabled) {
            return false
        }
        let iconClass = fullScreenClass.value

        if(iconClass == "hoverIconToSmall"){
            fullScreenClass.value = "hoverIcon"
            fullScreenTitle.value = "全屏"
        }else{
            fullScreenClass.value = "hoverIconToSmall"
            fullScreenTitle.value = "取消全屏"
        }
            screenfull.toggle()
    }
    const logout = () => {
    ElMessageBox.confirm(
        '是否确认登出?',
        '确认框',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
        )
        .then(() => {
            request.get("/api/logout")
            router.push("/login",{params:{logout:true}})
            sessionStorage.removeItem("user")
            sessionStorage.removeItem("menu")
            ElMessage({message: '登出成功！',type: 'success'})
            menuState.state = true
            navTabStores.clear()
        })
        .catch(() => {

        })
    }
</script>
<style>
    .hoverIcon{
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 22px !important;
    }
    .hoverIcon:hover{
        font-size: 25px !important;;
        transition: 0.2s;
    }
    .hoverIconToSmall{
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 30px !important;
    }
    .hoverIconToSmall:hover{
        font-size: 25px !important;;
        transition: 0.2s;
    }
    .list-enter-active{
        transition: all 0.7s ease;
    }
    .list-enter-from,
    .list-leave-to {
        opacity: 0;
        transform: translateX(50px);
    }
</style>